<template>
  <a-dropdown>
    <div class="header-avatar" style="cursor: pointer">
      <a-avatar class="avatar-type">
        <span class="name">{{ user }}</span>
      </a-avatar>
      <div class="user-info-type">
        <div>{{ userInfo.departmentName }}</div>
        <div class="role-type">{{ userInfo.roleName }}</div>
      </div>
    </div>
    <a-menu :class="['avatar-menu']" slot="overlay">
      <a-menu-item
        @click="onChangeEnterprise(item)"
        v-for="(item, idx) in enterpriseList"
        :key="idx"
        :class="{ actived: activedId === item.roleDeptId }"
      >
        <span>{{ item.name }}</span>
      </a-menu-item>
      <a-menu-divider />
      <a-menu-item @click="logout">
        <a-icon style="margin-right: 8px" type="poweroff" />
        <span>退出登录</span>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script>
import { mapGetters } from "vuex";
import { logout, getMenu } from "@/services/user";
import { mapMutations } from "vuex";
import { removeAuthorization, setAuthorization } from "@/utils/request";
import { loadRoutes } from "@/utils/routerUtil";
import { getInitPath } from "@/utils/util";
import Cookie from "js-cookie";
export default {
  name: "HeaderAvatar",
  computed: {
    ...mapGetters("account", ["user", "enterpriseList", "userInfo"])
  },
  data() {
    return {
      activedId: +Cookie.get("departmentId")
    };
  },
  mounted() {},
  methods: {
    ...mapMutations("account", [
      "setEnterpriseId",
      "setUser",
      "setPermissions",
      "setRoles",
      "setUserInfo"
    ]),
    async logout() {
      let token = Cookie.get("Authorization")?.split("Bearer")[1];
      let params = {
        token
      };
      const {
        data: { code }
      } = await logout(params);
      if (code === 200) {
        localStorage.removeItem(process.env.VUE_APP_ROUTES_KEY);
        localStorage.removeItem(process.env.VUE_APP_PERMISSIONS_KEY);
        localStorage.removeItem(process.env.VUE_APP_ROLES_KEY);
        localStorage.removeItem("enterpriseId");
        removeAuthorization();
        this.$router.push("/login");
      }
    },
    onChangeEnterprise(item) {
      this.activedId = item.roleDeptId;
      this.getEnterpriseMenu(item.id);
    },
    async getEnterpriseMenu(id) {
      setAuthorization(
        {
          enterpriseId: id
        },
        "basic"
      );
      this.setEnterpriseId(id);
      // 目前还不确定怎么将参数传递给前端，暂时传null
      let params = {
        departmentId: null,
        roleId: null
      };

      const {
        data: { data, code }
      } = await getMenu(params);
      if (code === 200) {
        const {
          username: user = "",
          permissions,
          roles = [],
          resources,
          departmentId,
          roleId,
          departmentName,
          roleName
        } = data;

        setAuthorization(
          {
            departmentId,
            roleId
          },
          "auth1"
        );

        this.setUserInfo({ departmentName, roleName });
        this.setUser(user);
        this.setPermissions(permissions || []);
        this.setRoles(roles);
        if (!!resources && resources[0].children.length > 0) {
          loadRoutes(resources);
          // TODO 后续优化 获取初始页面路径
          let url = getInitPath(resources);
          this.$router.push(url);
        } else {
          this.$message.warning("当前企业页面不存在");
        }
      }
    }
  }
};
</script>

<style lang="less">
.header-avatar {
  display: iinlne-block;
  .avatar,
  .name {
    align-self: center;
  }
  .avatar {
    margin-right: 8px;
  }
  .name {
    font-weight: 500;
  }
}
.avatar-menu {
  width: 150px;

  .actived {
    background: #3d6cf7;
    color: #fff;
  }
}

.avatar-type {
  color: #f56a00;
  background-color: #fde3cf;
}

.user-info-type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  float: right;
  margin-left: 10px;
  transform: translateY(20%);

  div {
    height: 23px;
    line-height: 23px;
  }

  .role-type {
    width: 100px;
    text-align: center;
    border-radius: 4px;
    background: #fcfdff;
    color: #4a80ff;
  }
}
</style>
